<template>
  <div class="quality-construction-page">
    <div class="breadcrumb">
      <Breadcrumb :data="breadcrumbData"></Breadcrumb>
    </div>
    <main>
      <div class="tabs">
        <div class="tab-btns">
          <div
            :class="['tab-pane', tabsActive === '1' ? 'active' : '']"
            @click="handleSwitch('1')">
            智慧灌溉
          </div>
          <div
            :class="['tab-pane', tabsActive === '2' ? 'active' : '']"
            @click="handleSwitch('2')">
            智慧碾压
          </div>
          <div
            :class="['tab-pane', tabsActive === '3' ? 'active' : '']"
            @click="handleSwitch('3')">
            智慧振捣
          </div>
        </div>
      </div>
      <div class="content">
        <div class="content-left">
          <div class="quality-video">
            <div class="header">
              <h3>视频监控</h3>
              <el-select v-model="lives" size="small" placeholder="请选择对应监控">
                <el-option
                  v-for="(item, index) in liveList"
                  :value="item"
                  :label="item.name_device"
                  :title="`${item.name_device || ''} ${item.info_device || ''}`"
                  :key="item.nums_device + index"
                >
                </el-option>
              </el-select>
            </div>
            <div class="quality-video-container">
              <video-play :data="videoConfig"></video-play>
            </div>
          </div>
          <div class="quality-info">
            <div class="header">
              <h3>振捣统计图</h3>
              <el-button type="primary" size="small">查看报告</el-button>
            </div>
            <div class="quality-echarts">
              <echarts-base :options="echartsOptions"></echarts-base>
            </div>
          </div>
        </div>
        <div class="content-right">
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import Breadcrumb from '@/components/public/Breadcrumb';
import echartsBase from '@/components/echarts/base';
import VideoPlay from '@/components/public/Video';

export default {
  data() {
    return {
      // 面包屑数据
      breadcrumbData: [
        {
          name: '质量管理',
        },
        {
          name: '智慧施工'
        }
      ],
      tabsActive: '1',
      // 直播配置
      videoConfig: {},
      lives: {},
      liveList: []
    };
  },
  computed: {
    projectName() {
      return this.$store.state.currentProjectInfo.projectName;
    },
    echartsOptions() {
      return {
        textStyle: {
          color: '#fff'
        },
        legend: {
          data: ['合格', '不合格'],
          bottom: 10,
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        series: [
          {
            type: 'pie',
            radius: '55%',
            label: {
              formatter: '{b}: {d}%'
            },
            data: [
              {
                value: 100,
                name: '合格',
                itemStyle: {
                  color: 'rgb(85, 201, 246)'
                }
              },
              {
                value: 10,
                name: '不合格',
                itemStyle: {
                  color: 'rgba(226, 145, 184, 1)'
                }
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
    },
  },
  watch: {
    lives: {
      deep: true,
      handler(options) {
        console.log('options', options);
        if (options) {
          this.videoConfig = this.setLiveOptions(options);
          console.log('this.videoConfig', this.videoConfig);
        }
      }
    }
  },
  mounted() {
    this.getLiveToken();
    this.$message.warning('该功能正在开发中！');
  },
  components: {
    Breadcrumb,
    echartsBase,
    VideoPlay
  },
  methods: {
    /**
     * 切换tabs
     * @param type {String} tabs类型
     */
    handleSwitch(type) {
      this.tabsActive = type;
    },
    /**
     * 设置直播配置
     * @param options {Object} 摄像机信息
     */
    setLiveOptions(options) {
      if (!options) return;
      const { access_token, nums_device, passageway } = options;
      return {
        autoplay: false,
        accessToken: access_token,
        url: `${this.$configs.videoUrl}/${nums_device}/${passageway}.live`
      };
    },
    /**
     * 获取所有摄像机的信息
     */
    async getLiveToken() {
      try {
        const { success, data } = await this.$Model.getameraList({
          project_name: this.projectName
        });
        if (success && data.data) {
          const result = data.data.data;
          this.liveList = Array.isArray(result) ? result : [];
          this.lives = this.liveList[0] || {};
        }
      } catch (e) {}
    },
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/main';

  .quality-construction-page {
    > main {
      width: 100%;
      height:calc(100% - 40px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-color: $baseBg;
      padding: 20px;
      .tabs {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: $mainBg;
        padding: 0 20px;
        border-radius: 10px;
        .tab-btns {
          height: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
        .tab-pane {
          width: 120px;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 5px 10px;
          margin: 0 5px;
          color: #fff;
          cursor: pointer;
          border-bottom: 2px solid transparent;
          transition: all .5s;
          &.active {
            color: $mainColor;
            border-bottom: 2px solid #fff;
          }
          &:hover {
            color: $mainColor;
            /*background: $mainBtnBg;*/
          }
        }
      }
      .content {
        width: 100%;
        height: calc(100% - 60px);
        display: flex;
        justify-content: space-between;
        .content-left {
          width: 28%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-right: 20px;
          > div {
            width: 100%;
            height: 48.5%;
            background: $mainBg;
            border-radius: 10px;
            .header {
              width: 100%;
              height: 50px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 10px 20px;
            }
          }
          .quality-info {
            .quality-echarts {
              width: 100%;
              height: calc(100% - 50px);
            }
          }
          .quality-video {
            .quality-video-container {
              width: 100%;
              height: calc(100% - 50px);
            }
          }
        }
        .content-right {
          flex: 1;
          height: 100%;
          background: $mainBg;
          border-radius: 10px;
        }
      }
    }
  }
</style>
